<!-- 回到顶部的按钮 -->
<template>
  <image
    v-if="mOption.src"
    class="mescroll-totop"
    :class="[value ? 'mescroll-totop-in' : 'mescroll-totop-out', { 'mescroll-totop-safearea': mOption.safearea }]"
    :style="{
      'z-index': mOption.zIndex,
      left: left,
      right: right,
      bottom: addUnit(mOption.bottom),
      width: addUnit(mOption.width),
      'border-radius': addUnit(mOption.radius),
    }"
    :src="mOption.src"
    mode="widthFix"
    @click="toTopClick"
  />
</template>

<script>
export default {
  props: {
    // up.toTop的配置项
    option: Object,
    // 是否显示
    value: false,
  },
  computed: {
    // 支付宝小程序需写成计算属性,prop定义default仍报错
    mOption() {
      return this.option || {}
    },
    // 优先显示左边
    left() {
      return this.mOption.left ? this.addUnit(this.mOption.left) : 'auto'
    },
    // 右边距离 (优先显示左边)
    right() {
      return this.mOption.left ? 'auto' : this.addUnit(this.mOption.right)
    },
  },
  methods: {
    addUnit(num) {
      if (!num) return 0
      if (typeof num === 'number') return num + 'rpx'
      return num
    },
    toTopClick() {
      this.$emit('input', false) // 使v-model生效
      this.$emit('click') // 派发点击事件
    },
  },
}
</script>

<style>
/* 回到顶部的按钮 */
.mescroll-totop {
  z-index: 9990;
  position: fixed !important; /* 加上important避免编译到H5,在多mescroll中定位失效 */
  right: 20rpx;
  bottom: 120rpx;
  width: 72rpx;
  height: auto;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s; /* 过渡 */
  margin-bottom: var(--window-bottom); /* css变量 */
}

/* 适配 iPhoneX */
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  .mescroll-totop-safearea {
    margin-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom)); /* window-bottom + 适配 iPhoneX */
    margin-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
  }
}

/* 显示 -- 淡入 */
.mescroll-totop-in {
  opacity: 1;
}

/* 隐藏 -- 淡出且不接收事件*/
.mescroll-totop-out {
  opacity: 0;
  pointer-events: none;
}
</style>
